<template>
	<view>
		<view class="tap">
			<view class="item-class" @click="changeItem(5)"> </view>
			<view :class="['item',{current:active==index} ]" v-for="(item,index) in type" v-if="item.name!='购厂宝典'" @click="changeItem(index)">{{item.name}}</view>


		</view>

		<view class="page-section-spacing" v-if="recommend.length>0">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" @change="change"
			 :duration="duration">
				<swiper-item v-for="(item,index) in recommend" :key="item.id">
					<navigator :url="'/pages/gonglue/detail?id='+item.id">
						<image class="item" :src="item.img[0]">
					</navigator>
				</swiper-item>
			</swiper>
			<view class="dot">
				<view class="title">{{recommend[current-1].title}}</view>
				<view class="yuandian">
					<view :class="['item',{'current':current-1===index}] " v-for="(item,index) in count" :key="index"></view>
				</view>
			</view>
		</view>
		<view class="container-content" v-if="active==index" v-for="(item,index) in type" :key="index">
			<uni-gonglue :item="item1" v-for="(item1,index1) in list[index]" :key="item.id"></uni-gonglue>
			<uni-load-more :status="more[index]" color="#000000" @clickLoadMore="getGonglueList"></uni-load-more>
		</view>
		<uni-footer></uni-footer>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {

		data() {
			return {
				active: 5,
				type: [],
				page: [],
				list: [],
				more: [],

				indicatorDots: false,
				autoplay: true,
				interval: 10000,
				duration: 500,
				recommend: [],
				slider: [
					'../../../static/images/banner.png',
					'../../../static/images/banner.png',
					'../../../static/images/banner.png'
				],
				current: 1,
				count: [],
			}
		},
		created() {
			// #ifdef MP-TOUTIAO
			/* let token = uni.getStorageSync('token')
			if(!token){
				uni.reLaunch({
					url:"/pages/login/login"
				})
			} */
			// #endif
			//#ifdef MP-TOUTIAO
			this.$toutiao(29)
			//#endif
			//this.getList()
			this.$api.getNewsCondition().then(res => {
				this.type = res.data
				this.type.map(item => {
					this.page.push(1)
					this.list.push([])
					this.more.push('more')
				})
				this.changeItem(5)
			})
			this.$api.getNewsRecommend().then(res => {
				this.recommend = res.data
				let count = []
				for (let i in res.data) {
					count.push(i)
				}
				this.count = count
			})

		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			console.log('refresh');

			this.$set(this.list, this.active, [])
			this.$set(this.page, this.active, 1)
			this.$set(this.more, this.active, 'more')
			this.getGonglueList()
		},

		methods: {
			changeItem(index) {
				this.active = index
				if (this.page[index] == 1) {
					this.getGonglueList()
				}
			},
			change(event) {
				this.current = event.detail.current + 1
			},
			//攻略
			getGonglueList() {
				if (this.more[this.active] == 'noMore') {
					return
				}
				console.log(111)
				this.more[this.active] = "loading"
				this.$api.getNews({
					type: this.type[this.active].id,
					page: this.page[this.active]
				}).then(res => {
					//	this.list[this.active]=	this.list[this.active].concat(res.data);
					this.$set(this.list, this.active, this.list[this.active].concat(res.data))
					this.$set(this.page, this.active, this.page[this.active] + 1)
					uni.stopPullDownRefresh(); //停止下拉刷新动画

					if (!res.links.next) {
						this.$set(this.more, this.active, 'noMore')


					} else {
						this.$set(this.more, this.active, 'more')

					}

				})
			},
		}
	}
</script>

<style lang="scss">
	.container-content {
		padding-left: 29rpx;
		padding-right: 29rpx;
	}

	.swiper {
		height: 400rpx;

		.item {
			width: 750rpx;
			height: 400rpx;
			background: rgba(0, 0, 0, 1);

		}
	}

	.dot {
		width: 100%;
		padding-left: 35rpx;
		padding-right: 35rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 25rpx;
		align-items: flex-end;
		.title {
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			text-overflow: hidden;
			height: 40rpx;
			color: rgba(255, 255, 255, 1);
			line-height: 40rpx;
			overflow: hidden;
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap;
			width: 505rpx;
		}
		.yuandian {
			display: flex;

			.item {
				width: 10rpx;
				height: 10rpx;
				background: rgba(149, 149, 149, 1);
				border-radius: 5rpx;
				margin-right: 5rpx;
			}

			.current {
				background-color: #FFFFFF;
			}
		}

	}

	.page-section-spacing {
		position: relative;
	}

	.tap {
		display: flex;
		padding-left: $padding-left;
		padding-right: $padding-right;
		margin-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item-class {
			width: 140rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background: url(https://pic.fhshidai.com/fileMWBP2aCI2u5VZ0hGlHIKdebgANNrNwzMxT2PaJSX.png) no-repeat;
			background-size: 140rpx 60rpx;
			margin-right: 32rpx;
		}

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 23rpx;
			color: #494949;
			margin-right: 32rpx;
			background: #F6F6F6;
			margin-bottom: 32rpx;
		}

		.current {

			color: #DA3337;
		}
	}
</style>
